/* eslint-disable jsx-a11y/alt-text */
import React from 'react';
import Navbar from '../component/Navbar';
import './style/futureOrder.css';
const tabList = ["开仓时间", "开仓品种", "开仓方向", '开仓数', '交易盈亏']
class futureOrder extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tabIndex: 0,
            listIndex: -1,
            type: true,
            list: ["期货怎么交易？", "怎么提现？", "配资是什么？", '怎么提现？', "配资是什么？"]
        }
    }
    goBack = () => {
        this.props.history.goBack();
    }
    //tab切换
    jumpTab(index) {
        console.log(index)
        this.setState({
            tabIndex: index,
        })
    }
    //点击list展开
    jumpListItem(index) {
        const { listIndex } = this.state
        if (listIndex === index) index = -1
        this.setState({
            listIndex: index
        })
    }
    render() {
        const { list, listIndex, tabIndex } = this.state
        return (
            <div className='futureOrder'>
                <Navbar onClick={this.goBack} title='期货订单' ></Navbar>
                <div className='scroll'>
                    <div className="tab">
                        {
                            tabList.map((item, index) => {
                                return <div key={index} className="tabItem">{item}</div>
                            })
                        }
                    </div>
                    <div className='content'>
                        {
                            list.map((item, index) => {
                                return <div className="listItem" key={index} onClick={() => this.jumpListItem(index)}>
                                    <div className="flex align-center">
                                        <div className="tabItem">2020-1-21 12:23:34</div>
                                        <div className="tabItem">德指DAX</div>
                                        <div className="tabItem" style={{ color: index % 2 === 0 ? "#28D1A7" : "#FC5656" }}>{index % 2 === 0 ? '买跌' : '买涨'}</div>
                                        <div className="tabItem">1手</div>
                                        <div className="tabItem flex align-center" style={{ justifyContent: "center" }} >
                                            <span className='money' style={{ color: index % 2 === 0 ? "#28D1A7" : "#FC5656" }}>{index % 2 === 0 ? '-378.00' : '+378.00'}</span>
                                        </div>
                                    </div>
                                </div>
                            })
                        }

                    </div>
                </div>
            </div>
        )
    }
}

export default futureOrder;